// 导入变量
@import "variable";

// 导入混合
@import "mixins";

// 导入重置样式
@import "reset";

// 设置版心
.container{
    width: 1200px;
    margin: 0 auto;
}
// topbar部分
.top-bar{
    background-color: #eaeaea;
    .container{
        display:flex;
        justify-content: space-between;
        line-height: 30px;
        height: 30px;
        .left-part{
            a{
                padding: 0 10px;
               &:first-of-type{
                   padding-left: 0;
                   border-right: 1px solid #b3aeae;
               } 
            }
        }
        .right-part{
            font-size: 0;
            a{
                font-size: 12px;
                padding: 0 10px;
                &+a{
                    border-left: 1px solid #b3aeae;
                }
            }
        }
    }
}
//header部分
header{
    .container{
        display: flex;
        justify-content: space-between;
        .logo{
            width: 175px;
            height: 56px;
            margin: 25px 45px;
            img{
                width: 175px;
                height: 56px;
            }
        }
        .searchbox{
            margin-top: 35px;
            font-size: 0;
            input{
                box-sizing: border-box;
                width: 490px;
                height: 32px;
                padding: 0 4px;
                border: 2px solid @form-red;
                font-size: 12px;
                outline: none;
              
            }
            button{
                cursor: pointer;
                height: 32px;
                width: 68px;
                color: #fff;
                font-size: 12px;
                outline: none;
                text-align: center;
                line-height: 32px;
                border: none;
                background-color: @form-red;
            }
        }
    }
}
// navbar部分
.navbar{
    border-bottom: 2px solid @bg-red;
    .container{
        display: flex;
        font-size: 0;
        .allgoods{
            width: 210px;
            height: 50px;
            background-color: @bg-red;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
        }
        .nav{
            display: flex;
            font-size: 16px;
            color: #333;
            line-height: 50px;
            li{
                margin: 0 22px;
                a{
                    color: #333!important;

                }
            }
        }
    }
}
// product部分
.product{
    .container{
        margin-top: 15px;
        //面包屑导航
        .breadcrumb{
                padding: 9px 15px 9px 0;
                a{
                    &+a::before{
                        content: "/\00a0";
                        padding-right:5px;
                        color: #ccc;   
                    }
                }               
        }
        //商品整体
        .product-intro{
                margin: 5px 0 15px;
                display: flex;
                justify-content: space-between;
                position: relative;
                // 放大镜
                .preview{
                    width: 402px;
                    // 放大镜
                    .big-glass{
                        width: 400px;
                        height: 400px;
                        border:1px solid #dfdfdf;
                        position: relative;
                        img{
                            width: 400px;
                            height: 400px;
                        }
                        .mask{
                            width: 200px;
                            height: 200px;
                            background-color:rgba(255, 230, 0, 0.5);
                            position: absolute;
                            border: 1px solid #ddd;
                            left: 0;
                            top: 0;
                            display: none;
                            cursor: move;
                        }
                    }
                    // 右侧大图
                    .bigimg{
                        width: 400px;
                        height: 400px;
                        position: absolute;
                        top: 0;
                        left: 420px;
                        border: 1px solid #dfdfdf;
                        overflow: hidden;
                        display: none;
                        img{
                            width: 800px;
                            height: 800px;
                        }
                    }
                    // 缩略图
                    .thumbnail{
                        display: flex;
                        justify-content: space-between;
                        width: 400px;
                        margin-top: 5px;
                        span{
                            width: 10px;
                            height: 54px;
                            border: 1px solid #ccc;
                            line-height: 54px;
                            text-align: center;
                            background-color:#EBEBEB;
                            cursor: pointer;
                            user-select: none;
                        }
                        .thumb-box{
                            width: 372px;
                            height: 56px;
                            overflow: hidden;
                            position: relative;
                            ul{
                                display: flex;
                                position: absolute;
                                left: 0;
                                transition: left .5s;
                                li{
                                    img{
                                        width: 50px;
                                        height: 50px;
                                        border: 1px solid #ccc;
                                        padding: 2px;
                                        margin-right: 20px;
                                    }
                                }
                            }
                        }
                        
                    }
                }
                //右侧价格
                .buy-goods{
                    width: 700px;
                    h3{
                        font-size: 14px;
                        line-height: 21px;
                        margin-top: 15px;
                    }
                    .recommend{
                        color: @form-red;
                        margin-top: 15px;
                    }
                    .price-box{
                        margin-top: 10px;
                        line-height: 28px;
                        background-color: #fee9ec;
                        padding: 7px;
                        .price{
                        
                            .clearfix();
                            .property{
                                margin-right: 15px;
                                float: left;
                            }
                            .priceValue{
                                color: #cc1122;
                                float: left;
                                .yuan{
                                    font-size: 16px;
                                }
                                .money{
                                    font-size: 24px; 
                                    font-weight: bold;
                                }
                                .info{
                                    font-size: 12px;
                                }
    
                            }
                            .comment{
                                float: right;
                            }
                        }
                        .sale{
                            margin-top: 10px;
                            display: flex;
                            .property{
                                margin-right: 15px;
                                float: left;
                            }
                            .content{
                                width: 520px;
                             
                                line-height: 28px;
                                color: #999;
                                .add-buy{
                                    background-color: #c81623;
                                    padding: 3px;
                                    color: #fff;
                                }
                            }
                        }
                    }
                    .support{
                        border-bottom: 1px solid #ededed;
                        padding-bottom:5px;
                        .row{
                            display: flex;
                            margin-top: 10px;
                            line-height: 28px;
                            .product{
                                margin-right: 15px;
                            }
                            p{
                                width: 520px;
                                color: #999;
                            }
                        }
                    }
                    .buy-bottom{
                        margin-top: 10px;
                        line-height: 28px;
                        .choose-area{
                            display: flex;
                            .mark{
                                height: 32px;
                                padding: 0 20px;
                                line-height: 32px;
                                border: 1px solid #ccc;
                                background-color: snow;
                                margin-right: 20px;
                                i{
                                    margin-left: 20px;
                                    color: #f00;
                                }
                            }
                           
                        }
                        dl{
                            display: flex;
                            margin: 13px 0;
                            dt{
                                margin-right: 15px;
                            }
                            dd{
                                margin-right: 5px;
                                color: #666;
                                line-height: 24px;
                                padding: 2px 14px;
                                border: 1px solid;
                                border-color: #eee #bbb #bbb #eee;
                                &.active{
                                    color: #f00;
                                }
                            }
                        }
                    }
                    .shopCarBox{
                        
                        display: flex;
                        .numValue{
                            position: relative;
                            margin-right: 15px;
                            width: 55px;
                            margin-right: 15px;
                            input{
                                width: 38px;
                                height: 37px;
                                border: 1px solid #ddd;
                                color: #555;
                                text-align: center;
                                outline: none;
                            }
                            button{
                                width: 15px;
                                height: 18px;
                                box-sizing: content-box;
                                cursor: pointer;
                                user-select: none;
                                outline: none;
                                border: 1px solid #ccc;
                                color: #666;
                                background-color: #f1f1f1;
                                position: absolute;
                                right: 0px;
                                &.reduce{
                                    bottom: 0;
                                }
                            }
                        
                        }
                        a{
                            height: 36px;
                            line-height: 36px;
                            padding: 0 25px;
                            font-size: 16px;
                            background-color: @form-red;
                            color: #fff;
                        }
                    }
                }

        }
        // 商品详情
        .product-details{
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            // 侧边栏
            .asidebar{
                width: 210px;
                border: 1px solid #ccc;
                .aside-title{
                    display: flex;
                    h4{
                        height: 40px;
                        border-top:3px solid #fff;
                        width: 105px;
                        line-height: 37px;
                        border-bottom: 1px solid #ccc;
                        text-align: center;
                        &.active{
                            border-top-color: @bg-red;
                            border-bottom-color: #fff;
                        } 
                    }
                    
                }
                .aside-main{
                    padding: 10px;
                    .aside-content{
                        display: none;
                        &.active{
                            display: block;
                        }
                        &:first-of-type{
                            .nav-list{
                                display: flex;
                                flex-wrap: wrap;
                                li{
                                    width: 50%;
                                    border-bottom: 1px dashed #ededed;
                                    line-height: 28px;
                                }
                            }
                            .good-list{
                                li{
                                    margin: 5px 0 15px;
                                    border-bottom: 1px solid #ededed;
                                    img{
                                        width: 152px;
                                        display: block;
                                        margin: 0 auto;
                                    }
                                    .price{
                                        font-size: 16px;
                                        color: #c81623;
                                    }
                                    .shopcar{
                                        text-align: center;
                                        a{
                                            display: inline-block;
                                            margin: 5px 0;
                                            border: 1px solid #8c8c8c;
                                            padding: 2px 14px;
                                            line-height: 18px;
                                            color: #8c8c8c;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            //介绍主体部分
            .details{
                width: 980px;
                .selection{
                    border: 1px solid #ddd;
                    margin-bottom: 15px;
                    h3{
                        border-bottom: 1px solid #ddd;
                        background-color: #f1f1f1;
                        color: #333;
                        padding: 5px 0 5px 15px;
                        font-size: 12px;
                    }
                    .content{
                        height: 170px;
                        padding-top: 10px;
                        display: flex;
                        .main{
                            height: 165px;
                            width: 127px;
                            position: relative;
                            img{
                                width: 87px;
                                display: block;
                                margin: 0 auto;
                            }
                            .main-price{
                                color: #c81623;
                                font-size: 16px;
                                text-align: center;
                            }
                            &::after{
                                content: "+";
                                position: absolute;
                                top: 48px;
                                right: -25px;
                                font-size: 16px;
                            }
                        }
                        .groups{
                            width: 668px;
                            height: 165px;
                            display: flex;
                            li{
                                text-align: center;
                                width: 127px;
                                margin: 0 20px;
                                img{
                                    width: 120px;
                                    height: 130px;
                                    display: block;
                                    margin: 0 auto;
                                }
                                input{
                                    vertical-align: middle;
                                }
                            }
                        }
                        .result{
                            border-left: 1px solid #ddd;
                            width: 153px;
                            height: 165px;
                            margin-left: 10px;
                            padding-left: 10px;
                            .goodsnum{
                                margin: 10px 0;
                            }
                            .taocanjia{
                                display: block;
                                font-weight: bold;
                                margin-bottom: 10px;
                            }
                            .package-price{
                                color: #b1191a;
                                font-size: 16px;
                                margin-bottom: 10px;
                            }
                            a{
                                display: inline-block;
                                padding: 10px 25px;
                                font-size: 16px;
                                color: #fff;
                                background-color: #e1251b;
                            }
                        }
                    }
                }
                .details-content{
                    .details-nav{
                        display: flex;
                        background-color: #ededed;
                        border-left: 1px solid #ddd;
                       li{
                        border: 1px solid #ddd;
                        border-left: none;
                        background-color: #fff;
                        height:40px;
                        padding: 0 11px;
                        line-height: 40px;
                        &.active{
                            background-color: @form-red;
                            color: #fff;
                        }
                       }
                    }
                    .details-page{
                        img{
                            display: block;
                            width: 100%;
                        }
                        &>li{
                            display: none;
                            &.active{
                                display: block;
                            }
                        }
                        .tabContent{
                            &>li{
                                margin: 10px 0;
                            }

                        }
                    }
                }

            }
        }
        //猜你喜欢
        .you-like{
            border: 1px solid #ddd;
            margin: 15px 0;
            h3{
                color: #333333;
                padding: 5px 10px;
                border-bottom: 1px solid #ddd;
                background-color: #f1f1f1;
                font-size: 12px;
            }
            .like-goods{
                display: flex;
                padding: 15px 11px;
                li{
                    width: 196px;
                    img{
                        display: block;
                        width: 167px;
                        height: 123px;
                    }
                    a{
                        display: block;
                        padding: 0 15px;
                    }
                    .price{
                        padding: 0 15px;
                        font-size: 16px;
                        color: #c81623;
                        margin-bottom: 20px;
                    }
                    .comment{
                        padding: 0 15px;
                    }
                }
            }
        }
    }    
}
//footer部分
.footer{
    background-color: #eaeaea;
    .container{
        .foot-nav{
            padding: 20px;
            border-bottom: 1px solid #e4e1e1;
            display: flex;
            dl{
                width: 16.6%;
                line-height: 18px;
                dt{
                    font-size: 14px;
                    font-weight: bold;
                }
                dd{
                    color: #666;
                }
            }
        }
        .footer-links{
            font-size: 0;
            text-align: center;
            a{
                font-size: 12px;
                &+a::before{
                    content: "|";
                    padding: 0 8px;
                }
            }
        }
        .address{
            text-align: center;
            padding-top:10px;

        }
        .icp{
            padding-top:10px;
            text-align: center;
        }
    }
}


//主体侧边栏
.body-aside{
    width: 300px;
    height: 100%;
    background-color: #7a6e6e;
    position: fixed;
    right: -294px;
    top: 0;
    display: flex;
    transition: right .3s ease-in-out 0s;
    .leftbox{
        width: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .topbtn{
            width: 35px;
            height: 35px;
            background-color: #7a6e6e;
            img{
                width: 100%;
                height: 100%;
                cursor: pointer;

            }
        }
        .slidebox{
            width: 62px;
            height: 35px;
            background-color:@bg-red;
            color: #fff;
            text-align: center;
            position: absolute!important;
            line-height: 35px;
            top: 0;
            left: 0;
            z-index: -1;
            transition: left 0.3s ease-in-out 0.1s;
        }
        .list{
            cursor: pointer;
            width: 35px;
            display: flex;
            flex-direction: column;
            li{
                height: 35px;
                position: relative;
                width: 35px;
                background-color: #7a6e6e;
                &:hover{
                    background-color: @bg-red;
                }
                .icon{
                    width: 100%;
                    height: 100%;
                    background: url(../images/toolbars.png) no-repeat;
                    &.vip-icon {
                        background-position: -87px -174px;
                      }
                    &.shopcar-icon {
                        background-position: -50px -0px;
                      }
                    &.follow-icon {
                        background-position: -50px -100px;
                      }
                    &.history-icon {
                        background-position: -190px -150px;
                      }
                    &.message-icon {
                        background-position: -50px -150px;
                      }
                    &.question-icon {
                        background-position: -50px -250px;
                      }
                }
                
                
            }
        }
        .totop{
            cursor: pointer;
            position: relative;
            width: 35px;
            height: 35px;
            background-color: #7a6e6e;
            &:hover{
                background-color: @bg-red;
            }
            .icon{
                width: 100%;
                height: 100%;
                background: url(../images/toolbars.png) no-repeat;
                &.top-icon {
                    background-position: -50px -250px;
                }
            }
            
        }
    }
    .rightbox{
        width: 294px;
        background-color: bisque;
    }
}